<script setup>
import { ref } from "vue";
import { getPicCodeApi, getMsgCodeApi, loginApi } from "@/api/login";
import Schema from "validate";
import { showSuccessToast } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/index.js";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const picUrl = ref("");
const picKey = ref("");
const isShowButton = ref(true);

const formData = ref({
  mobile: "",
  picCode: "",
  msgCode: "",
});

const lauchMsgCode = new Schema({
  mobile: {
    required: true,
    length: { min: 11, max: 11 },
    message: {
      required: "手机号不可以为空",
      length: "手机号长度为11位",
    },
  },
  picCode: {
    required: true,
    message: { required: "图形验证码不可以为空" },
  },
});
const user = new Schema({
  mobile: {
    required: true,
    length: { min: 11, max: 11 },
    message: {
      required: "手机号不可以为空",
      length: "手机号长度为11位",
    },
  },
  picCode: {
    required: true,
    message: { required: "图形验证码不可以为空" },
  },
  msgCode: {
    required: true,
    message: { required: "短信验证码不可以为空" },
  },
});
const login = async () => {
  const errors = user.validate(formData.value);
  if (errors.length > 0) {
    showFailToast(errors[0].message);
    return;
  }
  const {
    data: { token, userId },
  } = await loginApi(formData.value.mobile, formData.value.msgCode);
  userStore.setUserInfo(token, userId);
  showSuccessToast("登录成功");
  if (route.query?.redirect) {
    router.replace(route.query.redirect);
  } else {
    router.push("/");
  }
};
const getPicCode = async () => {
  const {
    data: { base64, key },
  } = await getPicCodeApi();
  picUrl.value = base64;
  picKey.value = key;
};
getPicCode();

const getCode = async () => {
  const errors = lauchMsgCode.validate(formData.value);
  if (errors.length > 0) {
    showFailToast(errors[0].message);
    return;
  }
  const res = await getMsgCodeApi(
    formData.value.picCode,
    picKey.value,
    formData.value.mobile
  );
  isShowButton.value = false;
  showSuccessToast("短信验证码发送成功");
};
</script>

<template>
  <van-nav-bar
    title="登录"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  />

  <div class="title">
    <h2>手机号登录</h2>
    <p>未注册的手机号将自动注册</p>
  </div>

  <van-cell-group inset>
    <van-field v-model="formData.mobile" placeholder="请输入手机号码">
    </van-field>
    <van-field v-model="formData.picCode" placeholder="请输入图形验证码">
      <template #button>
        <img :src="picUrl" alt="" @click="getPicCode" v-if="picUrl" />
      </template>
    </van-field>
    <van-field v-model="formData.msgCode" placeholder="请输入短信验证码">
      <template #button>
        <van-button
          size="small"
          type="primary"
          @click="getCode"
          v-if="isShowButton"
          >发送验证码</van-button
        >
        <van-count-down
          :time="60 * 1000"
          format="ss 秒"
          v-else
          @finish="isShowButton = true"
        />
      </template>
    </van-field>
    <div class="test">验证码测试期间为：246810</div>
  </van-cell-group>

  <van-button type="primary" block class="button" round @click="login"
    >登 录</van-button
  >
</template>

<style scoped lang="scss">
.title {
  margin: 50px 0 30px;
  padding: 0 30px;
  h2 {
    height: 40px;
  }
  p {
    color: grey;
  }
}
:deep(.van-field__button) {
  img {
    display: block;
    width: 90px;
    height: 42px;
  }
}
.van-count-down {
  padding: 6px 0;
}
.button {
  width: 90%;
  margin: 40px auto;
  font-size: 20px;
}
.test {
  padding: 14px;
  font-size: 13px;
  color: red;
}
</style>
